/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import { View, Dimensions } from 'react-native';
import { Icon,  List, Button, InputItem, Tabs, TextareaItem, DatePicker } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader } from '../../../../library/comp';
import { Dialog, Http, PageBase } from '../../../../library/func';
import Design from '../../../../design';
import Config from '../../../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Cash extends PageBase {
	constructor(props) {
		super(props);
		this.state = {
			// 余额使用记录的变量
			list:[
				{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},
			]
		}
    }

	/************************************************************************************ Render */
	render() {
		return (
			<CPage>

				{/* 页面顶部部分：账户余额，此部分不随页面滚动，使用CHeader标签固定到顶部 */}
				<CHeader top='96'>
					<CColumn style={{width: Config.map.screen.width}}>
						<CRow bg='#2a2f30' pa='20' pt='80' x='center' y='center' style={{width: Config.map.screen.width}}>
							<CText color='#2bc76f' size='28'>账户余额</CText>
						</CRow>
						<CRow bg='#2a2f30' pb='40' x='center' y='center' style={{width: Config.map.screen.width}}>
							<CText bold color='#fff' size='52'>￥</CText>
							<CText bold color='#fff' size='64'>100</CText>
						</CRow>
						<CRow bg='#2a2f30' pb='80' x='center' y='center' style={{width: Config.map.screen.width}}>
							<CHand x='center' y='center' ba='1 #2bc76f' w='280' py='16' ra='10'><CText bold color='#2bc76f' size='30'>充值</CText></CHand>
						</CRow>
						<CRow rt='40' pt='40' px='30' bg='#fff' mt='-40' h='60' style={{width: Config.map.screen.width}}></CRow>
					</CColumn>
				</CHeader>

				<CScroll mt='552' bg='#fff' >

					{/* 循环余额变更的记录 */}
					<CColumn pl='30' pr='30' style={{width:Config.map.screen.width}}>
						{this.state.list.map(() => {
							return (<CHand bb='2 #dedee0' py='10'>
								<CItemY f='1'>
									<CText>余额支付订单</CText>
									<CText color='#b8b8b8' size='26' pt='5'>2018-09-22 10:54:14</CText>
								</CItemY>
								<CItemX f='1' x='right' y='center'>
									<CText pr='20' size='26'>-105.01</CText>
								</CItemX>
							</CHand>);
						})}
					</CColumn>

				</CScroll>

                {/* header */}
				<PHeader nav={this.nav}>我的余额</PHeader>
                
			</CPage>
		);
	}
}
